<template>
	<view class="note">

		<view class="headerbox">
			<view class="header">
				<uni-icons class="icon" type="back" size="50rpx" color="#fff" @click="backHandler"></uni-icons>
				<view class="title">个人简历</view>
			</view>

			<view class="nav">
				<view class="section">
					<view class="sect">
						<view class="meimg">
							<view class="ontitle">
								<text>Alex</text>
								<view>无工作经验 . 20岁 . 大专</view>
							</view>
							<view class="onimg">
								<!-- <img src="../img/toxiang1.jpg" alt="" /> -->
							</view>
						</view>
						<view class="line"></view>
					</view>
					<view class="sect">
						<view class="menodes">
							<view class="ontitles">
								<text>个人优势</text>
								<view>有什么个人优势呢？用一两句话表述吧~</view>
							</view>
						</view>
						<view class="line"></view>
					</view>

					<view class="sect">
						<view class="menodes">
							<view class="ontitles">
								<text>求职期望</text>
								<view>前端 、 15~20K</view>
							</view>
						</view>
						<view class="line"></view>
					</view>


					<view class="sects">
						<view class="onsectitle">
							<view class="onsectxet">工作经历</view>
							<view class="ontitles-node">
								<text>1、你做的什么工作呀！描述一下工作内容吧~</text>
								<text>2、工作内容记得要写哦，增加就业几率。 …</text>
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		methods: {
			backHandler() {
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss">
	.note {
		width: 100vw;
		box-sizing: border-box;
		display: -webkit-box;
		height: 100vh;
		overflow: scroll;
		overflow: auto;

		.headerbox {
			position: fixed;
			top: 0;
			right: 0;
			left: 0;
			width: 100%;
			height: 100vh;
			overflow: scroll;

			.nav {
				z-index: 100;

				.onlup {
					.medata {
						margin: 300rpx 0;
					}

					.metitle {
						margin: 100rpx 0;
						font-size: 28rpx;
						font-weight: bold;
					}
				}



				.section {
					.sect {
						.line {
							width: 90%;
							height: 2rpx;
							background: #f4f4f7;
							margin: 0 auto;
						}

						.meimg {
							display: flex;
							padding: 40rpx 40rpx;

							.ontitle {
								width: 85%;
								text-align: start;

								text {
									font-size: 36rpx;
									font-family: SourceHanSansCN;
									font-weight: bold;
									color: #333333;
									line-height: 70rpx;
								}

								view {
									font-size: 24rpx;
								}
							}

							.onimg {
								width: 20%;

								img {
									width: 120rpx;
									height: 120rpx;
									border-radius: 50%;
								}
							}
						}
					}

					.menodes {
						display: flex;
						padding: 40rpx 40rpx;

						.ontitles {
							width: 80%;
							text-align: start;

							text {
								font-size: 28rpx;
								font-family: SourceHanSansCN;
								font-weight: 500;
								color: #333333;
								line-height: 70rpx;
								font-weight: bold;
							}

							view {
								color: #999;
								font-size: 24rpx;
								// margin-top: 20rpx;
							}
						}
					}
				}

				.sects {
					padding: 40rpx 40rpx;
					text-align: start;

					.onsectitle {
						.onsectxet {
							font-size: 28rpx;
							font-family: SourceHanSansCN;
							font-weight: 500;
							color: #333333;
							line-height: 70rpx;
							font-weight: bold;
						}

						.ontitles-node {
							color: #999;
							display: flex;
							flex-direction: column;

							text {
								line-height: 40rpx;
								font-size: 24rpx;
							}
						}
					}

				}
			}

			.header {
				display: flex;
				height: 100rpx;
				background-color: #64af58;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-size: 36rpx;
				position: sticky;
				left: 0;
				top: 0;
				z-index: 100;
				font-weight: bold;

				.icon {
					position: absolute;
					left: 30rpx;
					top: 50%;
					margin-top: -24rpx;
				}
			}
		}
	}
</style>
